<template>
  <div class="index">
    <div class="top-region">
      <div class="top-container" />
    </div>
    <div class="header">
      <div class="left">
        <img
          src="./static/logo.png"
          alt=""
          class="imgLogo"
        >
        <div class="worth">
          <div class="top">肉桂产业大数据服务云平台</div>
        </div>
      </div>
      <div class="right">
        <el-input
          v-model="keyword"
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
        />
      </div>
    </div>
    <div class="nagv">
      <div class="navigation">
        <el-menu
          :default-active="curMenuIndex"
          background-color="rgb(133, 194, 38)"
          class="el-menu-demo"
          text-color="black"
          active-background-color="rgb(0, 146, 63)"
          active-text-color="rgb(255,255,255)"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item
            v-for="(menu,index) in menuList"
            :key="index"
            style="width:12.5%;height:65px;font-size:16px;text-align:center"
            :index="String(index)"
          >{{ menu.name }}</el-menu-item>
        </el-menu>
      </div>
    </div>
    <router-view />
    <div class="footer">
      <div class="region">
        <div class="title">肉桂大数据平台</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Bigdata',

  data() {
    return {
      menuList: [
        {
          name: '首页',
          path: '/bigdata-home'
        },
        {
          name: '肉桂资讯',
          path: '/information'
        },
        {
          name: '肉桂行情',
          path: '/bigdata-market'
        },
        {
          name: '肉桂云图',
          path: '/chart'
        },
        {
          name: '肉桂企业',
          path: '/bigdata-company'
        },
        {
          name: '肉桂舆情',
          path: '/publicOption'
        },
        {
          name: '肉桂病虫害',
          path: '/pest'
        },
        {
          name: '肉桂展会',
          path: '/exhibition'
        }
      ],
      curMenuIndex: '0',
      keyword: ''
    }
  },
  watch: {
    // 监视$route对象的变化
    '$route': {
      handler(to, from) {
        const currentPath = this.$route.path
        const activeItem = this.menuList.find(item => item.path === currentPath)
        let flag = 0
        for (let i = 0; i < this.menuList.length; i++) {
          if (this.menuList[i].path == currentPath) {
            this.curMenuIndex = String(i)
            flag = 1
          }
        }
        if (!flag) {
          this.curMenuIndex = String(-1)
        }
      },
      deep: true // 深度监视$route对象的变化
    }
  },
  mounted() {

  },

  methods: {
    handleSelect(index) {
      this.$router.push(this.menuList[index].path)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  height: 142px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.index {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .top-region {
    width: 100%;
    height: 25px;
    padding: 2.5px;
    background-color: rgb(133, 194, 38);

    .top-container {
      margin: 0 auto;
      width: 87%;
    }
  }

  .header {
    height: 115px;
    width: 87%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      width: 800px;
      height: 90px;
      display: flex;

      .imgLogo {
        width: 105px;
        height: 105px;
      }

      .worth {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        justify-content: center;

        .center2 {
          display: flex;
          justify-content: center;
          font-weight: 900;
          align-items: center;
          height: 30px;
        }

        .top {
          letter-spacing: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18px;
          font-weight: 800;
          height: 30px;
        }

        .bottom {
          letter-spacing: 8px;
          font-size: 18px;
          font-weight: 800;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 30px;
        }
      }
    }

    .center {
      width: 270px;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;

      .worth {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        justify-content: center;

        .center2 {
          font-size: 18px;
          font-weight: bold;
          line-height: 25px;
          color: #068140;
          letter-spacing: 5px;
        }

        .top {
          font-size: 18px;
          font-weight: bold;
          line-height: 25px;
          color: #068140;
          letter-spacing: 5px;
        }

        .bottom {
          font-size: 18px;
          font-weight: bold;
          line-height: 25px;
          color: #068140;
          letter-spacing: 5px;
        }
      }
    }

    .right {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 290px;
      height: 90px;
    }
  }

  .nagv {
    width: 100%;
    background-color: rgb(133, 194, 38);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

    .navigation {
      width: 87%;
    }
  }
}

.footer {
  background-color: rgb(133, 194, 38);
  height: 150px;
  width: 100%;
  padding: 50px;

  .region {
    width: 87%;
    margin: 0 auto;
  }

  .title {
    font-size: 25px;
  }
}
</style>
